<template>
  <view class="custom-tabbar">
    <view 
      v-for="(item, index) in list" 
      :key="index" 
      class="tabbar-item"
      :class="{ active: activeIndex === index }"
      @click="switchTab(index, item.pagePath)"
    >
      <image :src="activeIndex === index ? item.selectedIconPath : item.iconPath" />
      <text>{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    current: Number,
	default: 0
  },
  data() {
    return {
      list: [
		  {
          pagePath: "/pages/index",
          iconPath: "https://shalong.taiyanyue.top/images/iconPark-mark1.png",
          selectedIconPath: "https://shalong.taiyanyue.top/images/iconPark-mark2.png",
          text: "首页",
		  index:0
        },
        {
          pagePath: "/pages/activity",
          iconPath: "https://shalong.taiyanyue.top/images/riLine-road-map-line2.png",
          selectedIconPath: "https://shalong.taiyanyue.top/images/riLine-road-map-line1.png",
          text: "活动",
		  index:1
        },
		{
		  pagePath: "/pages/shoppingmall",
		  iconPath: "https://shalong.taiyanyue.top/images/riLine-shopping-basket-line2.png",
		  selectedIconPath: "https://shalong.taiyanyue.top/images/riLine-shopping-basket-line1.png",
		  text: "商城",
		  index:2
		},
		{
		  pagePath: "/pages/my",
		  iconPath: "https://shalong.taiyanyue.top/images/riLine-lightbulb-line2.png",
		  selectedIconPath: "https://shalong.taiyanyue.top/images/riLine-lightbulb-line1.png",
		  text: "我的",
		  index:3
		}
        
      ]
    };
  },
  computed: {
      activeIndex() {
        // 优先使用传入的current，没有则使用默认值
        return typeof this.current !== 'undefined' ? this.current : 0;
      }
    },
  methods: {
    switchTab(index, path) {
        if (this.current !== index) {
          // 使用 switchTab 而不是 navigateTo，避免页面栈堆积
          uni.switchTab({ 
            url: path,
            success: () => {
              // 可以在这里触发全局事件或状态更新
            }
          });
        }
      }
  }
};
</script>

<style scoped>
.custom-tabbar {
  position: fixed;
  bottom: 20px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 0px 12px 0px;
  width: 93%;
  margin-left: 12px;
  border-radius: 22px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #cacaca;
}
.tabbar-item.active {
  font-weight: bold;
  color: #339966;
}
.tabbar-item image {
  width: 20px;
  height: 20px;
}
</style>